spb/rareindex

1import { ImageResponse } from 'next/og';2import { ogMark } from '@/components/layout/logo';3import { publicProfile } from '@/lib/account/queries';4import { summarizePortfolio } from '@/lib/account/portfolio';5import { fmtMoney } from '@/lib/format';67export const runtime = 'nodejs';8export const alt = 'RareIndex collector profile';9export const size = { width: 1200, height: 630 };10export const contentType = 'image/png';1112export default async function Image({ params }: { params: Promise<{ handle: string }> }) {13  const { handle } = await params;14  const p = await publicProfile(handle);15  const name = p?.user.name ?? `@${handle}`;16  const total = p ? summarizePortfolio(p.items) : null;17  const top = total?.allocationByFamily.slice(0, 3).map((b) => b.label).join(' · ') ?? '';18  return new ImageResponse(19    (20      <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: 64, background: '#fafaf9', color: '#0b0b0c', fontFamily: 'sans-serif' }}>21        <div style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 28, fontWeight: 600 }}>22          {ogMark(40)}23          RareIndex <span style={{ color: '#55555b', fontWeight: 400 }}>· collector profile</span>24        </div>25        <div style={{ display: 'flex', flexDirection: 'column' }}>26          <div style={{ fontSize: 72, fontWeight: 700, letterSpacing: -2 }}>{name}</div>27          <div style={{ fontSize: 30, color: '#55555b', marginTop: 8 }}>@{handle}{top ? ` · ${top}` : ''}</div>28        </div>29        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', borderTop: '2px solid #e4e4e2', paddingTop: 24 }}>30          <div style={{ display: 'flex', flexDirection: 'column' }}>31            <div style={{ fontSize: 20, color: '#8a8a91', textTransform: 'uppercase', letterSpacing: 2 }}>Public collection value</div>32            <div style={{ fontSize: 56, fontWeight: 700 }}>{total?.valuedCount ? fmtMoney(total.valueUsd) : '—'}</div>33          </div>34          <div style={{ fontSize: 24, color: '#55555b' }}>{total ? `${total.itemCount} items · ${p?.collections.length ?? 0} collections` : ''}</div>35        </div>36      </div>37    ),38    { ...size },39  );40}41